<!--
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-05-28 16:32:42
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-05-28 18:04:44
 * @FilePath: \guanggu_traffic\src\components\public\MapControl.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<div id="mouse-position"></div>
	<div id="toggle">
		<img
			src="http://gis.x-zd.net/open-map/assets/vector.5cb7d6a8.png"
			alt=""
			@click="handleTaggle('vector')"
		/>
		<img
			src="http://gis.x-zd.net/open-map/assets/image.73771b41.png"
			alt=""
			@click="handleTaggle('image')"
		/>
	</div>
</template>

<script setup>
import { onMounted, getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance();
let vectorLayer = null;
let imgLayer = null;
onMounted(() => {
	const map = proxy.$map;
    //获取矢量图层和影像图层
    vectorLayer = map.getLayers().getArray()[1];
    imgLayer = map.getLayers().getArray()[0];
	// 添加鼠标位置坐标显示控件
	const mousePositionControl = new ol.control.MousePosition({
		coordinateFormat: ol.coordinate.createStringXY(4),
		projection: 'EPSG:4326',
		className: 'custom-mouse-position',
		target: document.getElementById('mouse-position'),
		undefinedHTML: '&nbsp',
	})
	map.addControl(mousePositionControl)
	//比例尺
	const scaleLineControl = new ol.control.ScaleLine({
		units: 'metric',
	})
	map.addControl(scaleLineControl)
	//鹰眼控件
	const overviewMapControl = new ol.control.OverviewMap({
		//鹰眼控件样式
		className: 'ol-overviewmap ol-custom-overviewmap',
		layer: [imgLayer, vectorLayer],
		/* 鹰眼控件展开时功能按钮上的标识(网页的JS的字符编码) */
		collapseLabel: '\u00BB',
		/* 鹰眼控件折叠时功能按钮上的标识(网页的JS的字符编码) */
		label: '\u00AB',
		/* 初始为展开显示方式 */
		collapsed: false,
		view: new ol.View({
			projection: 'EPSG:4326',
			minZoom: 9,
			maxZoom: 14,
		}),
	})
	map.addControl(overviewMapControl)
})
//控制地图显示和隐藏
const handleTaggle = (type) => {
	if (type == 'image') {
		vectorLayer.setVisible(false)
	} else {
		vectorLayer.setVisible(true)
	}
}
</script>

<style lang="scss" scoped>
:global(.ol-zoom-extent) {
	top: 8.643em;
	right: 0.5em;
	left: auto;
}

:global(.ol-zoom) {
	top: 4.5em;
	right: 0.5em;
	left: auto;
}
#mouse-position {
	position: fixed;
	bottom: 10px;
	z-index: 100;
	left: 50%;
	transform: translate(-50%);
	width: 200px;
	height: 40px;
	background-color: #7197b7;
	opacity: 0.6;
	text-align: center;
	line-height: 40px;
	color: #fff;
	border-radius: 5px;
}
#toggle {
	position: fixed;
	bottom: 35px;
	z-index: 100;
	left: 10px;
}
img {
	width: 80px;
	height: 80px;
	border: 1px solid #333;
	padding: 5px;
	margin: 5px;
	border-radius: 40%;
	cursor: pointer;
	transition: all 0.2s ease;
}
img:hover {
	transform: scale(1.05);
	border: 3px solid rgb(20, 151, 216);
}
:global(.ol-overviewmap) {
	left: 86em;
	bottom: 2.5em;
}
</style>
